import { Injectable } from '@angular/core';

import { YNumber } from '../../pipes/yNumberPipe';

import { BigNum } from '../../pipes/bigNumPipe';

import { CategoryName } from '../../pipes/categoryNamePipe';


import { AppSettings } from '../../app.settings';

import { Util } from '../../utils/util';

import { TranslatePipe } from '../../translate';

declare var $: any;
declare var echarts: any;
@Injectable()
export class NgEchartService {

  public excelIcon = "path://M32 146.064v731.936c184.144 34.736 367.856 69.408 552.256 104.224V41.776C399.44 76.704 215.664 111.44 32 146.064z m429.424 550.016c-23.76 0-47.456-0.128-71.168 0.112-5.936 0.144-9.664-1.376-12.608-6.944l-59.328-110.544c-3.84-7.184-5.952-15.28-7.92-20.496-23.28 43.008-47.104 87.296-71.28 131.456-1.568 2.832-5.52 6.064-8.4 6.128-31.136 0.4-62.272 0.304-95.76 0.304 2.752-4.48 4.496-7.632 6.416-10.544 35.52-54.736 70.976-109.52 106.8-164.048 4.144-6.368 4.672-10.864 0.608-17.648-32.592-54.064-64.672-108.416-96.896-162.672a523.232 523.232 0 0 1-7.2-12.544h39.776c18.416 0 36.896-0.304 55.264 0.304 3.728 0.064 9.184 2.656 10.672 5.648a8089.344 8089.344 0 0 1 55.792 115.68c2.528 5.28 4.016 11.04 6.416 17.648 1.264-1.856 2.16-3.008 2.816-4.256 22.016-43.088 43.984-86.096 66.128-129.12 1.264-2.4 4.32-5.52 6.608-5.52 29.568-0.352 59.152-0.304 90.608-0.304-2.768 4.992-4.384 8.224-6.368 11.408-33.296 54-66.608 108.112-100.144 162-4.08 6.48-4.368 10.864-0.176 17.52 34.672 54.896 68.88 110.032 103.2 165.12 1.984 3.184 3.728 6.464 6.544 11.392h-20.4v-0.08z m162.24 176.768s-0.352-69.952-0.352-106.336h109.584v-73.488h-109.28v-71.952h109.216v-73.008h-109.28v-71.696h109.52v-72.72h-109.456v-71.392h110.72v-73.92h-110.72V145.776H992v727.152H623.664v-0.08z m147.296-541.632c47.696 0 94.032-0.112 140.4 0.064 6.544 0.064 7.504-3.184 7.392-8.4-0.208-13.92-0.08-27.728-0.08-41.648v-22.624h-147.712v72.608z m-0.64 72.48v51.968c0 20.64 0 20.64 21.472 20.64 38.944 0 77.936 0.112 116.944-0.24 3.296-0.064 9.424-2.944 9.424-4.672 0.656-22.448 0.4-44.816 0.4-67.744-49.792 0.048-98.224 0.048-148.24 0.048z m147.76 144.832h-147.184v71.648h147.184v-71.648z m-147.184 216.304c2 0.672 2.64 1.024 3.312 1.024 45.6 0.112 91.264 0.112 136.912 0.304 6.304 0.048 7.744-2.768 7.68-8.208-0.192-18.368-0.48-36.8 0.192-55.072 0.304-8.656-3.056-10.4-11.024-10.336-42.48 0.304-84.912 0.176-127.392 0.256-3.056 0-6.128 0.4-9.616 0.704-0.064 24.224-0.064 47.68-0.064 71.328z";

  constructor(private _bigNum: BigNum, private _yNumber: YNumber, private _categoryName: CategoryName, private _appSettings: AppSettings, private util: Util, private _translatePipe: TranslatePipe) { }


  generate(_mode) {

    let option;

    switch (_mode) {
      case 'category-bar':
        option = this.categoryBarInit();
        break;
      case 'line-lm':
        option = this.lineSellLineMOption(); //销售额
        break;
      case 'line-m':
        option = this.lineSellMOption(); //销售额
        break;
      case 'line-mm':
        option = this.lineSellMMOption(); //销售额，销售量
        break;
      case 'line-month':
        option = this.lineSellMonthOption(); //销售额，销售量
        break;
      case 'line-word':
        option = this.lineSellWordOption(); //销售额
        break;
      case 'pie':
        option = this.pieOption(); //类目占比
        break;
      case 'pie-cat':
        option = this.pieCatOption(); //类目占比
        break;
      case 'pie-brand':
        option = this.pieBrandOption(); //类目占比
        break;
      case 'bar':
        option = this.barOption();
        break;
      case 'plant':
        option = this.plantOption(); //环图
        break;
      case 'word':

        option = this.wordOption();
        break;
      default:
        break;
    }

    return option;
  }

  // table html
  tableHTML(opt) {
    let data = opt.storeData;

    let column = opt.column;

    let table = '<table class="bordered highlight responsive-table"><thead><tr>';

    // th
    for (let c in column.dimText) {

      if (column.dimShow[c]) {
        table += '<th>' + column.dimText[c] + '</th>';
      }

    }

    table += '</tr></thead><tbody>';

    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      table += '<tr>'

      for (let d in column.dimText) {

        if (column.dimShow[d]) {

          let key = column.dim[d];

          if (key == 'date') {
            table += '<th>' + item[key].slice(0, 10) + '</th>';
          } else {
            table += '<th>' + item[key] + '</th>';
          }

        }

      }

      table += '</tr>';
    }
    table += '</tbody></table>';

    return table;
  }

  // table export
  exportTable(opt) {

    let column = opt.column;

    let data = this.util.jsonToArrry(opt.storeData, column.dim, column.dimText);


    this.util.export(data, column.fileName);
  }

  // category bar
  categoryBarInit() {
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        data: []
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            }
          },
          data: []
        }
      ]
    };

    return option;
  }

  // line bar
  lineSellLineMOption() {
    let optionLine = {
      storeData: [],
      column: {},
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          // console.log(params);
          let str = '<div style = "width:120px;text-align: left;">' + params[0].name + '</div>';

          for (let i = 0; i < params.length; i++) {
            str += '<div style = "text-align: left;padding-left:10px;"><span style="width:10px;height:10px;display:inline-block;border-radius:50%;background:' + params[i].color + '"></span>  ' + params[i].seriesName + ' : ' + this._bigNum.transform(params[i].data) + '</div>';
          }

          return str;
        }
      },
      grid: {
        left: 70,
        right: 70
      },
      legend: {
        x: 25,
        y: 5,
        data: [this._translatePipe.transform('价格', []), this._translatePipe.transform('销售量', [])]
      },
      toolbox: {
        top: 0,
        right: 10,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            show: false
          },
          magicType: {
            title: {
              line: this._translatePipe.transform('切换为折线图', []),
              bar: this._translatePipe.transform('切换为柱状图', [])
            },
            type: ['line', 'bar'], show: document.body.clientWidth < 600 ? false : true
          },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          },
          myTool1: {
            show: true,//是否显示
            title: this._translatePipe.transform('excel导出', []), //鼠标移动上去显示的文字
            icon: this.excelIcon, //图标
            onclick: (opt) => {
              // console.log(opt);
              opt = opt.option;

              this.exportTable(opt);

            }
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLabel: {
          formatter: function(value, idx) {
            return idx === 0 ? value : value.slice(5, 10);
          }
        }
      },
      yAxis: [{
        type: 'value',
        name: "价格/RMB",
        axisLabel: {
          formatter: (value, index) => {

            return this._yNumber.transform(value);
          }
        }
      }, {
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {
            return this._yNumber.transform(value);
          }
        }
      }],
      series: [{
        name: this._translatePipe.transform('价格', []),
        type: 'line',

        data: [],
        markLine: {
          data: [{
            type: 'average',
            name: '平均值',
            label: {
              normal: {
                formatter: (params) => {

                  return this._bigNum.transform(params.value);
                }
              }
            }
          }]
        }
      }, {
        name: this._translatePipe.transform('销售量', []),
        type: 'bar',
        yAxisIndex: 1,
        data: []
      }]
    };



    return optionLine;
  }


  // 月数据
  lineSellMonthOption() {
    let optionLine = {
      storeData: [],
      column: {},
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          // //console.log(params);
          let str = '<div style = "width:120px;text-align: left;">' + params[0].name + '</div>';

          for (let i = 0; i < params.length; i++) {
            str += '<div style = "text-align: left;padding-left:10px;"><span style="width:10px;height:10px;display:inline-block;border-radius:50%;background:' + params[i].color + '"></span>  ' + params[i].seriesName + ' : ' + this._bigNum.transform(params[i].data) + '</div>';
          }

          return str;
        }
      },
      grid: {
        left: 70,
        right: 70
      },
      legend: {
        x: 25,
        y: 5,
        data: [this._translatePipe.transform('销售额', []), this._translatePipe.transform('销售量', [])]
      },
      toolbox: {
        top: 0,
        right: 10,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            show: false
          },
          magicType: {
            title: {
              line: this._translatePipe.transform('切换为折线图', []),
              bar: this._translatePipe.transform('切换为柱状图', [])
            },
            type: ['line', 'bar'], show: document.body.clientWidth < 600 ? false : true
          },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          },
          myTool1: {
            show: true,//是否显示
            title: this._translatePipe.transform('excel导出', []), //鼠标移动上去显示的文字
            icon: this.excelIcon, //图标
            onclick: (opt) => {
              // console.log(opt);
              opt = opt.option;

              this.exportTable(opt);

            }
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLabel: {
          formatter: function(value, idx) {
            return idx === 0 ? value : value.slice(5, 10);
          }
        }
      },
      yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {

            return this._yNumber.transform(value);
          }
        }
      }, {
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {
            return this._yNumber.transform(value);
          }
        }
      }],
      series: [{
        name: this._translatePipe.transform('销售额', []),
        type: 'line',
        data: [],
        markLine: {
          data: [{
            type: 'average',
            name: '平均值',
            label: {
              normal: {
                formatter: (params) => {

                  return this._bigNum.transform(params.value);
                }
              }
            }
          }]
        }
      }, {
        name: this._translatePipe.transform('销售量', []),
        type: 'line',
        yAxisIndex: 1,
        data: []
      }]
    };



    return optionLine;

  }

  // 销售额，销售量
  lineSellMMOption() {

    let optionLine = {
      column: {},
      storeData: [],
      title: {},
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          // //console.log(params);
          let str = '<div style = "width:120px;text-align: left;">' + params[0].name + '</div>';

          for (let i = 0; i < params.length; i++) {
            str += '<div style = "text-align: left;padding-left:10px;"><span style="width:10px;height:10px;display:inline-block;border-radius:50%;background:' + params[i].color + '"></span>  ' + params[i].seriesName + ' : ' + this._bigNum.transform(params[i].data) + '</div>';
          }

          return str;
        }
      },
      grid: {
        left: 70,
        right: 70
      },
      legend: {
        x: 25,
        y: 5,
        data: [this._translatePipe.transform('日销售额', []), this._translatePipe.transform('日销售量', [])]
      },
      toolbox: {
        top: 0,
        right: 10,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            show: false
          },
          magicType: {
            title: {
              line: this._translatePipe.transform('切换为折线图', []),
              bar: this._translatePipe.transform('切换为柱状图', [])
            },
            type: ['line', 'bar'], show: document.body.clientWidth < 600 ? false : true
          },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          },
          myTool1: {
            show: true,//是否显示
            title: this._translatePipe.transform('excel导出', []), //鼠标移动上去显示的文字
            icon: this.excelIcon, //图标
            onclick: (opt) => {
              // console.log(opt);
              opt = opt.option;

              let column = opt.column;

              let data = this.util.jsonToArrry(opt.storeData, column.dim, column.dimText);


              this.util.export(data, column.fileName);


            }
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLabel: {
          formatter: function(value, idx) {
            return idx === 0 ? value : value.slice(5, 10);
          }
        }
      },
      yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {

            return this._yNumber.transform(value);
          }
        }
      }, {
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {
            return this._yNumber.transform(value);
          }
        }
      }],
      series: [{
        name: this._translatePipe.transform('日销售额', []),
        type: 'line',
        data: [],
        markLine: {
          data: [{
            type: 'average',
            name: '平均值',
            label: {
              normal: {
                formatter: (params) => {

                  return this._bigNum.transform(params.value);
                }
              }
            }
          }]
        }
      }, {
        name: this._translatePipe.transform('日销售量', []),
        type: 'line',
        yAxisIndex: 1,
        data: []
      }]
    };

    return optionLine;
  }

  // 销售额
  lineSellMOption() {

    let configline = {
      column: {},
      storeData: [],
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          // console.log(params);
          let str = '<div style = "width:120px;text-align: left;">' + params[0].name + '</div>';

          for (let i = 0; i < params.length; i++) {
            str += '<div style = "text-align: left;padding-left:10px;"><span style="width:10px;height:10px;display:inline-block;border-radius:50%;background:' + params[i].color + '"></span>  ' + params[i].seriesName + ' : <span class="tm-yen">¥</span>' + this._bigNum.transform(params[i].data) + '</div>';
          }

          return str;
        }
      },
      toolbox: {
        right: 8,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          magicType: {
            title: {
              line: this._translatePipe.transform('切换为折线图', []),
              bar: this._translatePipe.transform('切换为柱状图', [])
            },
            type: ['line', 'bar']
          },
          restore: {
            show: false
          },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          },
          myTool1: {
            show: true,//是否显示
            title: this._translatePipe.transform('excel导出', []), //鼠标移动上去显示的文字
            icon: this.excelIcon, //图标
            onclick: (opt) => {

              opt = opt.option;

   

              this.exportTable(opt);
            }
          }

        }
      },
      grid: {
        //left: 60,
        left: '3%',
        right: '4%',
        bottom: '40',
        containLabel: true
      },
      legend: {

        data: [this._translatePipe.transform('总和', []), this._translatePipe.transform('天猫', []), this._translatePipe.transform('淘宝', []), this._translatePipe.transform('天猫国际', []), this._translatePipe.transform('全球购', [])],

        left: 'center',
        bottom: 0
      },
      xAxis: {
        data: [],
        axisLabel: {
          formatter: function(value, idx) {
            return idx === 0 ? value : value.slice(5, 10);
          }
        }
      },
      yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {
            return this._yNumber.transform(value);
          }
        }
      }],
      series: [{
        name: this._translatePipe.transform('总和', []),
        type: 'line',
        data: []
      }, {
        name: this._translatePipe.transform('天猫', []),
        type: 'line',
        data: []
      }, {
        name: this._translatePipe.transform('淘宝', []),
        type: 'line',
        data: []
      }, {
        name: this._translatePipe.transform('天猫国际', []),
        type: 'line',
        data: []
      }, {
        name: this._translatePipe.transform('全球购', []),
        type: 'line',
        data: []
      }]
    };

    return configline;
  }

  lineSellWordOption() {


    let optionLine = {
      storeData: [],
      fileName: '',
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          // console.log(params);
          let str = '<div style = "width:120px;text-align: left;">' + params[0].name + '</div>';

          for (let i = 0; i < params.length; i++) {
            str += '<div style = "text-align: left;padding-left:10px;"><span style="width:10px;height:10px;display:inline-block;border-radius:50%;background:' + params[i].color + '"></span>  ' + params[i].seriesName + ' : ' + this._bigNum.transform(params[i].data) + '</div>';
          }

          return str;
        }
      },
      toolbox: {
        top: 0,
        right: 4,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {

            lang: ['', '关闭', '下载'],
            readOnly: false,
            optionToContent: (opt) => {

              // console.log(opt);

              let data = opt.storeData;

              let table = '<table class="bordered highlight responsive-table"><thead><tr>'
                + '<th>日期</th>'
                + '<th>词云</th>'
                + '<th>类目</th>'
                + '<th>销售额</th>'
                + '<th>销售量</th>'
                + '<th>月销售额</th>'
                + '<th>月销售量</th>'
                + '<th>增长指数</th>'
                + '<th>热门指数</th>'
                + '</tr></thead><tbody>';

              for (let i = 0; i < data.length; i++) {


                table += '<tr>'
                  + '<td>' + data[i].date.slice(0, 10) + '</td>'
                  + '<td>' + data[i].words + '</td>'
                  + '<td>' + this._categoryName.transform(data[i].categoryName) + '</td>'
                  + '<td>' + data[i].sellMoney + '</td>'
                  + '<td>' + data[i].sellAmount + '</td>'
                  + '<td>' + data[i].monthSellMoney + '</td>'
                  + '<td>' + data[i].monthSellAmount + '</td>'
                  + '<td>' + data[i].growthIndexNumber + '</td>'
                  + '<td>' + data[i].hotIndexNumber + '</td>'
                  + '</tr>';
              }

              table += '</tbody></table>';
              return table;


            },
            contentToOption: (container, opt) => {

              let dim = ['date', 'words', 'categoryName', 'sellMoney', 'sellAmount', 'monthSellMoney', 'monthSellAmount', 'productNum', 'productSellMoneyGrowth', 'productSellMoneyDecrease', 'sellGrowthProductNum', 'sellDecreaseProductNum', 'hotIndexNumber', 'growthIndexNumber'];

              let dimText = ['时间', '词云', '类目', '日销售额', '日销售量', '月销售额', '月销售量', '宝贝数', 'productSellMoneyGrowth', 'productSellMoneyDecrease', 'sellGrowthProductNum', 'sellDecreaseProductNum', 'hotIndexNumber'];



              let name = optionLine.fileName;

              let data = this.util.jsonToArrry(opt.storeData, dim, dimText);


              this.util.export(data, name);


            }
          },
          magicType: { show: false },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          }
        }
      },
      grid: {
        //left: 60,
        left: '3%',
        right: '4%',
        bottom: '40',
        containLabel: true
      },
      legend: {
        data: ['日销售额', '日销售量', '热门指数'],
        left: 'center',
        bottom: 0
      },
      xAxis: {
        data: [],
        axisLabel: {
          formatter: function(value, idx) {
            return idx === 0 ? value : value.slice(5, 10);
          }
        }
      },
      yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {
            return this._yNumber.transform(value);
          }
        }
      }],
      series: [{
        name: '日销售额',
        type: 'line',
        data: []
      }, {
        name: '日销售量',
        type: 'line',
        data: []
      }, {
        name: '热门指数',
        type: 'line',
        data: []
      }]
    };

    return optionLine;
  }

  // 行业饼图类目销售额
  pieOption() {

    let dim = ['date', 'categoryName', 'categoryId', 'sellMoney', 'sellAmount', 'monthSellMoney', 'monthSellAmount', 'productNum', 'shopNum', 'tsellMoney', 'tsellAmount', 'monthTSellMoney', 'monthTSellAmount', 'tproductNum', 'tshopNum', 'thksellMoney', 'thksellAmount', 'monthThkSellMoney', 'monthThkSellAmount', 'thkproductNum', 'thkshopNum', 'gsellMoney', 'gsellAmount', 'monthGSellMoney', 'monthGSellAmount', 'gproductNum', 'gshopNum', 'csellMoney', 'csellAmount', 'monthCSellMoney', 'monthCSellAmount', 'cproductNum', 'cshopNum'];

    let dimText = ['时间', '类目', '类目id', '日销售额', '日销售量', '月销售额', '月销售量', '宝贝数', '店铺数', '天猫日销售额', '天猫日销售量', '天猫月销售额', '天猫月销售量', '天猫宝贝数', '天猫店铺数', '天猫国际日销售额', '天猫国际日销售量', '天猫国际月销售额', '天猫国际月销售量', '天猫国际宝贝数', '天猫国际店铺数', '全球购日销售额', '全球购日销售量', '全球购月销售额', '全球购月销售量', '全球购宝贝数', '全球购店铺数', '淘宝日销售额', '淘宝日销售量', '淘宝月销售额', '淘宝月销售量', '淘宝宝贝数', '淘宝店铺数'];


    let optionPie = {
      storeData: [],
      color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgb(216, 124, 124)', 'rgb(145, 158, 139)', 'rgb(81, 107, 145)', 'rgb(89, 196, 230)', 'rgb(237, 175, 218)', 'rgb(147, 183, 227)', 'rgb(165, 231, 240)', 'rgb(203, 176, 227)'],
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          // //console.log(params);
          let str = '<div style = "text-align: center;">' + params.name + '</div>';

          str += '<div style = "text-align: left;padding-left:10px;">' + params.seriesName + ' : ' + this._bigNum.transform(params.value) + '(' + params.percent + '%)</div>';

          return str;
        }
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 30,
        bottom: 20,
        data: [],
        formatter: (name) => {
          return echarts.format.truncateText(name, 80, '14px Microsoft Yahei', '…');
        },
        tooltip: {
          show: true
        }
      },
      toolbox: {
        right: 20,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            show: false
          },

          magicType: { show: false },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          },
          myTool1: {
            show: true,//是否显示
            title: this._translatePipe.transform('excel导出', []), //鼠标移动上去显示的文字
            icon: this.excelIcon, //图标
            onclick: (opt) => {



              let data = this.util.jsonToArrry(opt.option.storeData, dim, dimText);


              this.util.export(data, opt.option.fileName);
            }
          }
        }
      },
      series: [{
        name: '日销售额占比',
        type: 'pie',
        radius: '40%',
        selectedMode: 'single',
        center: ['40%', '50%'],
        data: [],
        label: {
          normal: {
            formatter: (params) => {
              return echarts.format.truncateText(params.name, 80, '14px Microsoft Yahei', '…') + '(' + params.percent + '%)';
            }
          },
          emphasis: {
            textStyle: {
              fontSize: 14,
              fontWeight: 800
            }
          }
        },
        labelLine: {
          normal: {

          },
          emphasis: {

          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function(idx) {
          return Math.random() * 200;
        }
      }]
    };



    return optionPie;
  }

  // 饼图销售占比
  pieCatOption() {
    let optionPie = {
      storeData: [],
      column: {},
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          // //console.log(params);
          let str = '<div style = "text-align: center;">' + params.name + '</div>';

          str += '<div style = "text-align: left;padding-left:10px;">' + params.seriesName + ' : ' + this._bigNum.transform(params.value) + '(' + params.percent + '%)</div>';

          return str;
        }
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 40,
        bottom: 20,
        data: [],
        formatter: (name) => {

          // console.log(name);

          return echarts.format.truncateText(this._categoryName.transform(name), 80, '14px Microsoft Yahei', '…');
        },
        tooltip: {
          show: true
        }
      },
      toolbox: {
        top: 0,
        right: 10,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            show: false/*
            lang: ['', '关闭', '下载'],
            readOnly: false,
            optionToContent: (opt) => {


              return this.tableHTML(opt);
            },
            contentToOption: (container, opt) => {

              this.exportTable(opt);

            }*/
          },

          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          },
          myTool1: {
            show: true,//是否显示
            title: this._translatePipe.transform('excel导出', []), //鼠标移动上去显示的文字
            icon: this.excelIcon, //图标
            onclick: (opt) => {

              opt = opt.option;

              this.exportTable(opt);
            }
          }
        }
      },
      series: [{
        name: '日销售额占比',
        type: 'pie',
        radius: '40%',
        selectedMode: 'single',
        center: ['40%', '50%'],
        data: [],
        label: {
          normal: {
            formatter: (params) => {
              // return params.name + '(' + params.percent + '%)';
              return echarts.format.truncateText(this._categoryName.transform(params.name), 80, '14px Microsoft Yahei', '…') + '(' + params.percent + '%)';
            }
          },
          emphasis: {
            textStyle: {
              fontSize: 14,
              fontWeight: 800
            }
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function(idx) {
          return Math.random() * 200;
        }
      }]
    };


    return optionPie;
  }

  //饼图品牌销售占比
  pieBrandOption() {
    let optionPie = {
      storeData: [],
      column: {},
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          // //console.log(params);
          let str = '<div style = "text-align: center;">' + params.name + '</div>';

          str += '<div style = "text-align: left;padding-left:10px;">' + params.seriesName + ' : ' + this._bigNum.transform(params.value) + '(' + params.percent + '%)</div>';

          return str;
        }
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: [],
        formatter: (name) => {
          return echarts.format.truncateText(name, 80, '14px Microsoft Yahei', '…');
        },
        tooltip: {
          show: true
        }
      },
      toolbox: {
        top: 0,
        right: 10,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            show: false/*
            lang: ['', '关闭', '下载'],
            readOnly: false,
            optionToContent: (opt) => {

              return this.tableHTML(opt);
            },
            contentToOption: (container, opt) => {

              this.exportTable(opt);

            }*/
          },
          magicType: { show: false },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          },
          myTool1: {
            show: true,//是否显示
            title: this._translatePipe.transform('excel导出', []), //鼠标移动上去显示的文字
            icon: this.excelIcon, //图标
            onclick: (opt) => {

              opt = opt.option;

              this.exportTable(opt);
            }
          }
        }
      },
      series: [{
        name: '日销售额占比',
        type: 'pie',
        radius: '40%',
        selectedMode: 'single',
        center: ['40%', '50%'],
        data: [],
        label: {
          normal: {
            formatter: (params) => {
              return echarts.format.truncateText(params.name, 80, '14px Microsoft Yahei', '…') + '(' + params.percent + '%)';
            }
          },
          emphasis: {
            textStyle: {
              fontSize: 14,
              fontWeight: 800
            }
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function(idx) {
          return Math.random() * 200;
        }
      }]
    };


    return optionPie;
  }

  // 柱状图
  barOption() {
    let optionBar = {
      storeData: [],
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          let str = '<div style = "width:120px;text-align: left;">' + params[0].name + '</div>';

          for (let i = 0; i < params.length; i++) {
            str += '<div style = "text-align: left;padding-left:10px;">' + params[i].seriesName + ' : ' + this._bigNum.transform(params[i].value) + '</div>';
          }

          return str;
        }
      },
      toolbox: {
        top: 0,
        right: 4,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            show: false
          },
          magicType: { show: false },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          }
        }
      },
      grid: {
        left: 90,
        bottom: 80
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          rotate: 37,
          interval: 0
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (value, index) => {
            return this._yNumber.transform(value);
          }
        }
      },
      series: [{
        name: '日销售额',
        type: 'bar',
        data: []
      }]
    };


    return optionBar;


  }

  // 环
  plantOption() {
    var option = {
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          // //console.log(params);
          var str = '<div style = "text-align: center;">' + params.name + '</div>';

          str += '<div style = "text-align: left;padding-left:10px;">' + params.seriesName + ' : ' + this._bigNum.transform(params.value) + '(' + params.percent + '%)</div>';

          return str;
        }
      },
      legend: {
        x: 0,
        y: 15,
        orient: 'vertical',
        data: ['天猫', '淘宝', '天猫国际', '全球购']
      },
      toolbox: {
        top: 0,
        right: 4,
        show: false,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: { readOnly: false, show: false },
          magicType: { show: false },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          }
        }
      },
      series: [{
        name: '来源',
        type: 'pie',
        center: ['50%', '60%'],
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '20',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 310, name: '天猫' },
          { value: 234, name: '淘宝' },
          { value: 135, name: '天猫国际' },
          { value: 1548, name: '全球购' }
        ]
      }]
    };

    return option;
  }

  // word
  wordOption() {

    let option = {
      storeData: [],
      fileName: "",
      title: {},
      tooltip: {
        formatter: (params) => {
          // console.log(params);

          let dataIndex = params.dataIndex;

          let data = option.storeData[dataIndex];
          // let data = params.data.data;
          // var str = '<div style = "width:120px;text-align: left;">' +  + '</div>';

          let str = '<div style = "text-align: left;font-size:14px;"><div style="font-size:14px;padding:4px ;border-bottom:1px solid #ccc;">' + params.name + '</div>近30天销售额: ' + this._bigNum.transform(params.value) + '<br> 近30天销售量: ' + this._bigNum.transform(data.monthSellAmount) + '<br> 日销售额: ' + this._bigNum.transform(data.sellMoney) + '<br> 日销售量: ' + this._bigNum.transform(data.sellAmount) + '<br/> 宝贝数: ' + data.productNum + ' 件' + '<br/> 更新时间: ' + data.date.slice(0, 11) + '</div>';

          return str;
        }
      },
      toolbox: {
        top: 0,
        right: 4,
        show: true,
        feature: {
          dataZoom: {
            show: false
          },
          dataView: {
            lang: ['', '关闭', '下载'],
            readOnly: false,
            optionToContent: (opt) => {

              // console.log(opt);

              let data = opt.storeData;

              let table = '<table class="bordered highlight responsive-table"><thead><tr>'
                + '<th>日期</th>'
                + '<th>词云</th>'
                + '<th>类目</th>'
                + '<th>销售额</th>'
                + '<th>销售量</th>'
                + '<th>月销售额</th>'
                + '<th>月销售量</th>'
                + '</tr></thead><tbody>';

              for (let i = 0; i < data.length; i++) {


                table += '<tr>'
                  + '<td>' + data[i].date.slice(0, 10) + '</td>'
                  + '<td>' + data[i].words + '</td>'
                  + '<td>' + this._categoryName.transform(data[i].categoryName) + '</td>'
                  + '<td>' + data[i].sellMoney + '</td>'
                  + '<td>' + data[i].sellAmount + '</td>'
                  + '<td>' + data[i].monthSellMoney + '</td>'
                  + '<td>' + data[i].monthSellAmount + '</td>'
                  + '</tr>';
              }

              table += '</tbody></table>';
              return table;


            },
            contentToOption: (container, opt) => {

              let dim = ['date', 'words', 'categoryName', 'sellMoney', 'sellAmount', 'monthSellMoney', 'monthSellAmount', 'productNum', 'productSellMoneyGrowth', 'productSellMoneyDecrease', 'sellGrowthProductNum', 'sellDecreaseProductNum', 'hotIndexNumber', 'growthIndexNumber'];

              let dimText = ['时间', '词云', '类目', '日销售额', '日销售量', '月销售额', '月销售量', '宝贝数', 'productSellMoneyGrowth', 'productSellMoneyDecrease', 'sellGrowthProductNum', 'sellDecreaseProductNum', 'hotIndexNumber'];



              let name = option.fileName;

              let data = this.util.jsonToArrry(opt.storeData, dim, dimText);


              this.util.export(data, name);


            }
          },
          magicType: { show: false },
          restore: { show: false },
          saveAsImage: {
            title: this._translatePipe.transform('保存为图片', [])
          }
        }
      },
      series: [{
        type: 'wordCloud',
        gridSize: 25,
        sizeRange: [14, 50],
        rotationRange: [0, 0],
        shape: 'pentagon', // Shape can be 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
              }, {
                offset: 1, color: 'blue' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        },
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function() {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: []
      }]
    };

    return option;
  }
}



